<template>
	<view class="liveroom-wrap">
		<player
			:is-playback="isPlayback"
			:is-sp="true"
			@update-is-playback="updateIsPlayback"
			@controlstoggle="controlstoggle"
		/>
		<banner :visible="pluginVisible" :online="onlineNum" :likeCount="likeCount"/>
		<view
			class="chat-box"
			:style="{
				display: pluginVisible ? 'block' : 'none',
				bottom: isPlayback ? '40px' : '15px',
			}"
		>
			<view class="zz" style="position: absolute;top: 0;height: 80rpx;width: 100%;"></view>
			<scroll-view
				v-if="allowChat"
				class="chat-list chat-mask"
				:show-scrollbar="false"
				:scroll-y="true"
				:enable-flex="true"
				:scroll-top="scrollTop" 
				@scrolltoupper="scrollToTop"

			>
			<!-- :scroll-into-view="scrollIntoViewId" -->
			<view class="chat-list-box" style="display: flex;flex-direction: column;overflow-y: scroll;">
				<view class="chat-item chat-item-notice">
					欢迎大家来到直播间！直播间内严禁出现违法违规、低俗色情、吸烟酗酒等内容，若有违规行为请及时举报。
				</view>
				<view
					v-for="(item) in chatList"
					:id="`msg-${item.id}`"
					class="chat-item"
				>
					<view v-if="item.id"
						class="chat-item-name"
						:style="{ color: getNameColor(item.nickname) }"
					>
						<image :src="baseUrl+item.avatar"></image>
						{{ item.nickname }}:
					</view>
					<view class="chat-item-content">{{ item.content }}</view>
				</view>
			</view>
			</scroll-view>
			<view class="operations-wrap">
				<view class="list-icon" @click="navTo('/pages/live/roomList/roomList')">
					<image :src="roomInfo.returnIcon ? baseUrl+roomInfo.returnIcon:'../../static/list.png'" mode="widthFix"></image>
				</view>
				<input
					:class="['chat-input', { 'fixed': inputFixedBottom > 0 }]"
					:style="{
						visibility: allowChat ? 'visible' : 'hidden',
						bottom: `${inputFixedBottom}px`,
					}"
					placeholder-class="chat-input-placeholder"
					:placeholder="chatPlaceholder"
					:disabled="chatInputDisbale"
					v-model="text"
					confirm-type="send"
					:adjust-position="false"
					@confirm="handleConfirm"
					@focus="handleFocus"
					@blur="handleBlur"
				>
				</input>
				<view class="smile-icon">
					<image src="../../static/smile.png" mode="widthFix"></image>
				</view>
				<view class="cart-icon" @click="showGoods = true">
					<image :src="roomInfo.goodsIcon ? baseUrl+roomInfo.goodsIcon:'../../static/shop.png'" mode="widthFix"></image>
				</view>
				<likeButton :throttle="100" :large="2" :duration="3000" :imgWidth="90" :imgHeight="90" :site="[105, 100]" :showImgs="likeImgs">
					<view class="tool-item like">
						<view class="like-icon" @click="likeLive">
							<image :src="roomInfo.likeIcon ? baseUrl+roomInfo.likeIcon:'../../static/like.png'" mode="widthFix"></image>
						</view>
					</view>
				</likeButton>
				
				<view class="more-icon" @click="showActionQrcode">
					<image :src="roomInfo.shareIcon ? baseUrl+roomInfo.shareIcon:'../../static/more.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="goods" v-if="goods && showJxGoods">
			<view class="image">
				<image :src="baseUrl+goods.goodsThumb" mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="title u-line-2">{{goods.goodsName}}</view>
				<view class="price">
					<text>￥{{goods.salePrice}}</text>
					<!-- <text class="ot-price">￥{{goods.marketPrice}}</text> -->
				</view>
				<view class="buy" @click="navTo('/pages/shop/goods/info?goods_id='+goods.goodsId+'&live_id='+liveId)">
					<text>去购买</text>
				</view>
			</view>
			<view class="close" @click="showJxGoods = false">
				<u-icon name="close-circle" color="#FFFFFF" size="48"></u-icon>
			</view>
		</view>
<!-- 		<chat-box
			:visible="pluginVisible"
			:is-playback="isPlayback"
			:joined-group-id="joinedGroupId"
		/> -->
<!-- 		<view class="coupon-icon" @click="getCouponList(1)" v-if="roomInfo.couponIds">
			<image src="../../static/coupon.png" mode="widthFix"></image>
		</view> -->
<!-- 		<view class="task-icon" @click="getCouponList(1)" v-if="roomInfo.luckyIds">
			<image src="../../../../static/public/images/hb.png" mode="widthFix"></image>
		</view> -->
		<view class="lucky-icon" @click="getTaskList" v-if="roomInfo.taskIds">
			<image :src="roomInfo.taskIcon ? baseUrl+roomInfo.taskIcon:'../../static/lp.png'" mode="widthFix"></image>
			<view class="txt">领福利</view>
		</view>
		<view class="share-icon" @click="showWechatQrcode = true" v-if="roomInfo.wechatQrcode">
			<image :src="roomInfo.wechatIcon ? baseUrl+roomInfo.wechatIcon:'../../static/wx.png'" mode="widthFix"></image>
			<view class="txt">加微信</view>
		</view>
		<u-popup v-model="showGoods" mode="bottom" border-radius="14">
			<view class="goods-box">
				<view class="titles">推荐产品</view>
				<view class="goods-list">
					<scroll-view class="goods-list-scroll" :scroll-y="true">
						<view class="item" v-for="(item,index) in roomInfo.goodsList" :key="index">
							<view class="image">
								<image :src="baseUrl+item.goodsThumb" mode="aspectFill"></image>
							</view>
							<view class="info">
								<view class="title u-line-2">{{item.goodsName}}</view>
								<view class="price">
									<text>￥{{item.salePrice}}</text>
									<text class="ot-price">￥{{item.marketPrice}}</text>
								</view>
								<view class="buy" @click="navTo('/pages/shop/goods/info?goods_id='+item.goodsId+'&live_id='+liveId)">
									<text>去购买</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showCoupon" mode="center" width="65%" z-index="13" :custom-style="customStyle">
			<view v-if="couponList.length==1" class="coupon-box">
				<view @click="receivefree(couponList[0].type_id)">
					<image src="../../../shop/static/coupon_bg0.png" mode="widthFix"></image>
					<view class="coupon-con">
						<view class="price">{{couponList[0].type_money}}</view>
						<view class="name">{{couponList[0].type_name}}</view>
						<view class="time">有效期：{{couponList[0].use_start_date}}~{{couponList[0].use_end_date}}</view>
					</view>
				</view>
				<view class="close" @click="showCoupon = false">
					<u-icon name="close-circle" color="#FFFFFF" size="68"></u-icon>
				</view>
			</view>
			<view v-else class="coupon-box" @click="navTo('/pages/shop/bonus/center?is_live=1')">
				<image src="../../../shop/static/coupon_bg.png" mode="widthFix"></image>
				<view class="coupon-cons">
					<view class="title">恭喜您获得</view>
					<view class="sub-title">{{totalCoupon}}元组合券</view>
					<view class="coupon-list">
						<scroll-view class="coupon-list-scroll" scroll-y="true">
							<view class="items" v-for="(item,index) in couponList">
								<image src="../../../shop/static/coupon_item.png" mode="widthFix"></image>
								<view class="price">{{item.type_money}}</view>
								<view class="name" v-if="item.use_type == 0">全场通用</view>
								<view class="name" v-if="item.use_type == 1">指定分类</view>
								<view class="name" v-if="item.use_type == 2">指定商品</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="close" @click="showCoupon = false">
					<u-icon name="close-circle" color="#FFFFFF" size="68"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showLucky" mode="center" width="65%" z-index="13" :custom-style="customStyle">
			<view class="coupon-box">
				<view>
					<image src="../../../shop/static/coupon_bg0.png" mode="widthFix"></image>
					<view class="coupon-con">
						<view class="price">{{luckData.money}}</view>
						<view class="name">{{luckData.name}}</view>
						<view class="time" v-if="luckData.type == 0">可用于提现或商城购物</view>
						<view class="time" v-if="luckData.type == 1">只可用于商城购物</view>
					</view>
				</view>
				<view class="submit" @click="receiveLucky(luckData.id)"></view>
				<view class="close" @click="showLucky = false">
					<u-icon name="close-circle" color="#FFFFFF" size="68"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showTask" mode="center" width="65%" z-index="13" :custom-style="customStyle">
			<view class="coupon-box">
				<image src="../../../shop/static/coupon_bg.png" mode="widthFix"></image>
				<view class="coupon-cons">
					<view class="title">恭喜您获得</view>
					<view class="sub-title">直播任务奖励</view>
					<view class="task-box" v-if="taskData.type > 0">
						<view class="price">
							<text>￥</text>{{taskData.money}}
						</view>
						<view class="name" v-if="taskData.type == 1">积分</view>
						<view class="name" v-if="taskData.type == 2">购物分</view>
					</view>
					<view class="task-box" v-else>
						<view class="goods-name">{{taskData.goods_name}}</view>
						<view v-if="taskData.logistics_type == 0">
							<view class="select" v-if="!address"
							@click="navTo('/pages/member/address/list?source=2&from=live')">选择收货地址</view>
							<view class="address" v-else @click="navTo('/pages/member/address/list?source=2&from=live')">
								收货地址：{{address}}
							</view>
						</view>
						<view v-if="taskData.logistics_type == 1">
							<view class="select" v-if="!sid"
							@click="navTo('/pages/user/store/index?from=live')">选择自提门店</view>
							<view class="select" v-else @click="navTo('/pages/user/store/index?from=live')">
								{{store_name}}
							</view>
						</view>
					</view>
					
				</view>
				<view class="submit" @click="receiveTask(taskData.id,taskData.type,taskData.logistics_type)"></view>
				<view class="close" @click="showTask = false">
					<u-icon name="close-circle" color="#FFFFFF" size="68"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showTaskList" mode="center" width="85%" border-radius="14">
			<view class="task-list-box">
				<view class="task-bg">
					<image src="../../static/task-bg.png" mode="widthFix"></image>
				</view>
				<view class="titles">做任务，领福利</view>
				<view class="list">
					<view class="item" v-for="(item,index) in allTaskList" :key="index">
						<view class="icon">
							<image :src="item.icon" mode="widthFix"></image>
						</view>
						<view class="center-box">
							<view class="top">
								<view class="name">{{item.name}}</view>
								<view class="progress">
									<u-line-progress height="16" inactive-color="#cac7c7" 
									:show-percent="false" active-color="#e50b7c" :percent="item.progress"></u-line-progress>
								</view>
								<view class="num">(<text>{{item.mins}}</text>/{{item.condition}})</view>
							</view>
							<view class="desc">{{item.desc}}</view>
						</view>
						<view class="right-box">
							<text v-if="item.task_status == 0" @click="showTaskList = false">看直播</text>
							<text v-else-if="item.task_status == 1"  @click="lqTask(item.item)">领奖励</text>
							<text v-else>已领奖</text>
						</view>
					</view>
				</view>
				<view class="close" @click="showTaskList = false">
					<view class="icon">
						<u-icon name="close" color="#FFF" size="28"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="tips" v-show="showTips" @click="showTips = false">
			<image src="../../static/share-info2.png" mode="widthFix"></image>
		</view>
		<u-mask :show="showTips" @click="showTips = false"></u-mask>
		
		<u-popup v-model="showWechatQrcode" mode="center" :closeable="true" border-radius="14">
			<view class="wechat-qrcode">
				<view class="titles">添加客服微信</view>
				<view class="img">
					<image :src="baseUrl+roomInfo.wechatQrcode" mode="widthFix"></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showShareQrcode" mode="center"  border-radius="14">
			<view class="distribution-posters">
				<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
					:duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px">
					<block v-for="(item,index) in img_url" :key="index" class="img-list">
						<swiper-item class="aaa">
							<div class="box" ref="bill" :class="swiperIndex == index ? 'active' : 'quiet'">
								<view class="user-msg">
									<view class="user-code">
										<image class="canvas" :style="{height:hg+'px'}" :src="item.image"
											v-if="item.image" mode="widthFix"></image>
									</view>
								</view>
							</div>
						</swiper-item>
					</block>
				</swiper>
				<view class="qrcode-tips">长按图片保存</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let observer = null;
	import Player from '../player/player.vue';
	import banner from './banner.vue';
	import likeButton from '../like-button/like-button.vue'
	import { getNameColor, throttle } from '@/utils/common.js';
	import { mapGetters } from 'vuex';
	export default {
		name:"liveroom",
		components: {
			Player,
			banner,
			likeButton
		},
		props: {
			liveId: {
				type: String,
				default: '',
			}
		},
		
		data() {
			return {
				baseUrl: this.config.baseUrl,
				text: '',
				isPlayback: false,
				// 点播情况下是否显示控制条，不显示时其他组件也不显示，要沉浸式播放
				// 默认是 true
				pluginVisible: true,
				inputFixedBottom: 0, // 绝对定位时的值
				myUid: 0,
				ws:null,
				wssUrl:this.config.wsUrl,
				timer:null,
				chatList:[],
				scrollTop: 0,
				loading:false,
				isScroll:true,
				page:1,
				limit:15,
				showGoods:false,
				
				showCoupon:false,
				couponList:[],
				totalCoupon:0,
				customStyle:{
					background:'none'
				},
				showLucky:false,
				luckData:'',
				showTask:false,
				taskData:'',
				selectAddress:{
					address_id : 0
				},
				address:'',
				sid:0,
				store_name:'',
				goods:[],
				showJxGoods:false,
				onlineNum:0,
				showTaskList:false,
				showTips:false,
				showWechatQrcode:false,
				allTaskList:[],
				showShareQrcode:false,
				img_url:[],
				current_img:'',
				
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				swiperIndex: 0,
				spreadList: [],
				spreadData:[],
				wd: 375,
				hg: 570,
				indicatorDots: false,
				likeImgs: [],
				likeCount:0
			};
		},
		computed: {
			...mapGetters({
				roomInfo: 'liveroom/info',
			}),
			allowChat() {
				const status = this.roomInfo.status;
				return status === 0 || status === 1;
			},
			chatPlaceholder() {
				if (this.roomInfo.groupMuted) {
					return '全员禁言中';
				}
				if (!this.allowChat) {
					return ' '; // 真机模拟时发现不展示输入框
				}
				return '说点什么';
			},
			chatInputDisbale() {
				return !this.allowChat || this.sending || !!this.roomInfo.groupMuted;
			},
			imReady() {
				return this.roomInfo.imReady;
			},
			isSend() {
				if (this.text.length == 0) {
					return false;
				} else {
					return true;
				}
			},
		},
		mounted() {
			let that = this
			
			this.likeImgs = [
				require('../../static/like/bg1.png'),
				require('../../static/like/bg2.png'),
				require('../../static/like/bg3.png'),
				require('../../static/like/bg4.png'),
				require('../../static/like/bg5.png'),
				require('../../static/like/bg6.png'),
			];
			
			let authcode = uni.getStorageSync("authcode");
			if(!authcode){
				return
			}
			setTimeout(function(){
				that.roomInfo.goodsList.forEach(item => {
					if(item.isJx){
						that.goods = item
						that.showJxGoods = true
					}
				})
			},800)
			
			let initSocket = () => {
				this.ws = uni.connectSocket({
					url: this.wssUrl,
					method: 'GET',
					success: (res) => {
						console.log('链接成功')
						setTimeout(function(){
							that.send({
								user_id:that.myUid,
								name:'测试',
								room_id: that.liveId,
								type: 'login'
							})
						},500)
						this.timer = setInterval(function() {
							that.send({
								type: "ping",
								user_id:that.myUid,
								name:'测试',
								room_id: that.liveId,
							});
						}, 10000);
						this.$nextTick(e => {
							this.getChatList();
						})
					},fail(e) {
						console.log(e)
					}
				});
				this.ws.onMessage(function(res){
					// console.log(res)
					let data = JSON.parse(res.data);
					if (data.type == 'say') {
						data.msn = data.content;
					}
					if (data.type == 'login') {
						console.log(data.name+'进入直播间')
						that.onlineNum = data.online_num
						data.content = '欢迎 '+data.name+' 进入直播间'
						data.id = 0
						that.chatList.push(data);
						that.$nextTick(() => {
							that.height();
						});
						return
					}
					if (data.type == 'logout') {
						return
					}
					if (data.type == 'coupon') {
						that.getCouponList(0)
						return
					}
					if (data.type == 'lucky') {
						that.getLuckyData(data.lucky_id)
						return
					}
					if (data.type == 'task') {
						that.getTaskData(data.task_id)
						return
					}
					if (data.type == 'goods') {
						that.getGoodsData(data.goods_id)
						return
					}
					that.chatList.push(data);
					that.$nextTick(() => {
						that.height();
					});
				})
				this.ws.onOpen(() => {
					console.log('WebSocket连接已打开！');
				});
				this.ws.onError((err) => {
				  console.log('WebSocket连接打开失败，请检查！');
				});
			}
			this.$u.post('member/api.center/getCenterInfo').then(res => {
				this.myUid = res.data.userInfo.user_id;
				initSocket()
			});
			uni.$on('socketClose', () => {
				console.log('关闭连接')
				this.socketCloses()
				clearInterval(this.timer);
			});
			uni.$on('selectLiveAddress', (res) => {
				that.selectAddress = res
				that.address = res.merger_name+res.address
			});
			uni.$on('selectLiveStore', (res) => {
				console.log(res)
				that.sid = res.id
				that.store_name = res.store_name
			});
			setTimeout(function(){
				that.likeCount = that.roomInfo.likeCount
			},1000)
		},
		methods: {
			socketCloses() {
			  if (this.ws) {
				this.ws.close();
			  }
			},
			send: function(data) {
				let datas = JSON.stringify(data)
				// console.log('消息内容：',datas)
				return uni.sendSocketMessage({
					data: datas,
					success() {
				// 		// console.log('消息内容：',datas)
						// console.log('消息发送成功')
					},fail(e) {
						// console.log('消息失败')
						console.log(e)
					}
				});
			},
			scrollToTop() {
				let self = this;
				if (this.isScroll) {
					this.loading = true;
					this.isScroll = false;
					setTimeout(res => {
						this.page++
						this.getChatList();
					}, 800);
				}
			},
			getChatList() {
				let self = this;
				this.$u.post('live/api.index/chatList',{
						page:this.page,
						limit: this.limit,
						room_id: this.liveId
					})
					.then(res => {
						let selector = '';
						if (res.data.serviceList.length) {
							selector = `#msg-${res.data.serviceList[res.data.serviceList.length - 1].id}`;
						}
						let arr = [];
						var sH = 0;
						uni.hideLoading();
						// res.data.serviceList.forEach(el => {
							// el._add_time = el._add_time.substring(0, el._add_time.length - 3);
							// el.msn = this.replace_em(el.msn);
			
						// });
						this.loading = false;
						this.chatList = [...res.data.serviceList, ...this.chatList];
						this.$nextTick(() => {
							if (this.chatList.length) {
								this.setPageScrollTo(selector);
								this.isScroll = res.data.serviceList.length >= this.limit;
							}
			
						});
					})
					.catch(error => {
						uni.hideLoading();
						this.loading = false;
						this.isScroll = false
			
					});
			},
			setPageScrollTo(selector) {
				let view = uni
					.createSelectorQuery()
					.in(this)
					.select(selector);
				view.boundingClientRect(res => {
					this.scrollTop = res ? parseFloat(res.top) - 60 : 0;
					// console.log(res.top,88)
				}).exec();
			},
			// 聊天表情转换
			replace_em(str) {
				str = str.replace(/\[([^\[\]]+)\]/g, "<span class='em $1' style='background-image:url(" + this
					.httpUrl + ")'></span>");
				return str;
			},
			height() {
				let self = this;
				var scrollTop = 0;
				let info = uni.createSelectorQuery().select('.chat-list-box');
				setTimeout(res => {
					info.boundingClientRect(function(data) {
						//data - 各种参数
						scrollTop = data.height;
						self.scrollTop = parseInt(scrollTop) + 500;
					}).exec();
				}, 200);
			},
			handleConfirm() {
				if (!this.isSend) {
					uni.showToast({
						title:'请输入内容',
						icon:'none'
					})
				}
				this.send({
					type: "say",
					user_id:this.myUid,
					name:'测试',
					room_id: this.liveId,
					content:this.text
				});
				this.text = '';
			},
			getNameColor(name) {
				return getNameColor(name);
			},
			updateIsPlayback(bool) {
				this.isPlayback = bool;
			},
			controlstoggle(bool) {
				this.pluginVisible = bool;
			},
			handleFocus(evt) {
				if (evt.detail.height > 35) {
					this.inputFixedBottom = evt.detail.height;
				}
			},
			handleBlur() {
				this.inputFixedBottom = 0;
			},
			getCouponList(type){
				this.$u.post('live/api.Index/getCouponList',{live_id:this.liveId}).then(res => {
					this.couponList = res.data
					if(this.couponList.length > 0){
						this.roomInfo.couponIds = 1
						this.showCoupon = true
					}else{
						if(type == 1){
							this.navTo('/pages/shop/bonus/center?is_live=1')
						}
					}
					this.couponList.forEach(item=>{
						this.totalCoupon += item.type_money
					})
				})
			},
			receivefree(id){
				let that = this
				this.$u.post('shop/api.bonus/receiveFree',{id:id}).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						that.showCoupon = false
					}
			
				})
			},
			getLuckyData(id){
				this.$u.post('live/api.Index/getLuckyData',{lucky_id:id}).then(res => {
					if(res.data.length != 0){
						this.luckData = res.data
						this.showLucky = true
					}else{
						this.luckData = ''
					}
				})
			},
			receiveLucky(id){
				let that = this
				this.$u.post('live/api.Index/receiveLucky',{id:id,live_id:this.liveId}).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						that.showLucky = false
					}
			
				})
			},
			getTaskData(id){
				this.$u.post('live/api.Index/getTaskData',{task_id:id}).then(res => {
					if(res.data.length != 0){
						this.taskData = res.data
						this.showTask = true
					}else{
						this.taskData = ''
					}
				})
			},
			receiveTask(id,type,logistics_type){
				let that = this
				if(type == 0){
					if(logistics_type == 0){
						if(!this.address){
							this.tips('请选择收货地址再领取')
							return
						}
					}else{
						if(!this.sid){
							this.tips('请选择提货门店')
							return
						}
					}
				}
				this.$u.post('live/api.Index/receiveTask',{
					id:id,
					live_id:this.liveId,
					address_id:this.selectAddress.address_id,
					sid:this.sid
				}).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						that.showTask = false
						that.showTaskList = true
					}
			
				})
			},
			getGoodsData(goods_id){
				this.roomInfo.goodsList.forEach(item => {
					if(goods_id == item.id){
						if(this.goods.id == goods_id){
							this.showJxGoods = false
							this.goods = ''
						}else{
							this.goods = item
							this.showJxGoods = true
						}
					}
				})
			},
			lqTask(item){
				this.showTask = true
				this.showTaskList = false
				this.taskData = item
			},
			tapShare(){
				// #ifdef H5
				this.showTips = true
				// #endif
			},
			likeLive(){
				this.$u.get('live/api.index/like',{live_id:this.liveId}).then(res => {
					// this.tips('点赞成功')
					this.likeCount = res.data.count
				})
			},
			getTaskList(){
				this.showTaskList = true
				this.$u.get('live/api.index/taskList',{live_id:this.liveId}).then(res => {
					this.allTaskList = res.data
				})
			},
			showActionQrcode(){
				this.showShareQrcode = true
				//#ifdef MP-WEIXIN
					this.is_wxmp = 1;
				//#endif
				this.$u.post('live/api.index/getShareImg',{live_id:this.liveId,isnew:1,is_wxmp:this.is_wxmp}).then(res => {
					this.img_url = [];
					this.current_img = this.baseUrl+res.data.img[0]
					res.data.img.forEach(item => {
						this.img_url.push({image:this.baseUrl+item})
					})
					// this.share_url = res.data.share_url;
				});
			},
			bindchange(e) {
				let spreadList = this.spreadList;
				this.swiperIndex = e.detail.current;
				this.current_img = this.img_url[e.detail.current].image
				console.log(this.current_img)
			},
		},
	}
</script>

<style lang="scss">
@import 'base.scss';
.liveroom-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	color: $info-text-color;
	background-image: $room-background;
}
.chat-box {
	position: absolute;
	bottom: 25px;
	left: 0;
	right: 0;
	padding: 0 16px;
	z-index: 12;
	.zz{
		
	}
}

.operations-wrap {
	display: flex;
	width: 100%;
	margin-top: 0.14rem;
	position: relative;
}

.chat-input {
	position: relative;
	color: $info-text-color;
	background-color: rgba(62, 62, 62, 0.5);
	border: none;
	outline: none;
	border-radius: 0.5rem;
	width: 350rpx;
	height: 0.72rem;
	min-height: 0.72rem;
	margin-right: 20rpx;
	padding: 0 20rpx;
	font-size: 0.28rem;
	padding-right: 76rpx;
	&.fixed {
		position: fixed;
		left: 0;
		right: 0;
		width: auto;
		border-radius: 0;
	}
	
	.a-input-wrap {
		background-color: transparent;
	}
}

.chat-input-placeholder {
	color: $info-text-color;
	font-size: 0.28rem;
}

.operation-btn-wrap {
	position: relative;
	box-sizing: content-box;
	margin-left: 0.24rem;
}
.operation-btn {
	position: relative;
	display: block;
	width: 0.72rem;
	height: 0.72rem;
	line-height: 0.72rem;
	font-size: 0.52rem;
	text-align: center;
	background-color: $block-backgroud-color;
	border-radius: 50%;
	cursor: pointer;
}

.chat-list {
  max-height: 440rpx;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  font-size: 0.28rem;
  box-sizing: border-box;
  
  /deep/ .uni-scroll-view-content {
  	display: flex;
  	flex-direction: column;
  	overflow-y: scroll;
  }
}
.chat-mask{
	-webkit-mask: -webkit-gradient(linear, left 30%, left top, from(#000), to(transparent));
}
.chat-item {
  max-width: 100%;
  display: inline-block;
  background-color: $block-backgroud-color;
  margin-bottom: 0.1rem;
  padding: 0.04rem 0.16rem;
  border-radius: 2px;
  align-self: flex-start;
  word-break: normal;
  line-height: 0.44rem;
  border-radius: 50rpx;
}

.chat-item-notice {
  color: #A4E0A7;
  border-radius: 16rpx;
}

.chat-item-name {
	display: inline;
	margin-right: 2px;
}
.chat-item-name image{
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-right: 6rpx;
	position: relative;
	top: -2rpx;
}
.chat-item-content {
	display: inline;
}
.list-icon{
	z-index: 101;
	margin-right: 20rpx;
	position: relative;
	top: 6rpx;
	image{
		width: 65rpx;
		height: 65rpx;
	}
}
.cart-icon{
	// position: absolute;
	// bottom: 240rpx;
	// right:34rpx;
	z-index: 101;
	margin-right: 15rpx;
	image{
		width: 75rpx;
		height: 75rpx;
	}
}
.like-icon{
	z-index: 101;
	margin-right: 15rpx;
	image{
		width: 75rpx;
		height: 75rpx;
	}
}
.more-icon{
	z-index: 101;
	image{
		width: 75rpx;
		height: 75rpx;
	}
}
.smile-icon{
	position: absolute;
	left: 350rpx;
	top: 12rpx;
	z-index: 101;
	image{
		width: 42rpx;
		height: 42rpx;
	}
}
.coupon-icon{
	position: absolute;
	bottom: 334rpx;
	right:32rpx;
	z-index: 101;
	image{
		width: 80rpx;
		height: 80rpx;
	}
}
.lucky-icon{
	position: absolute;
	bottom: 48vh;
	right:32rpx;
	z-index: 101;
	text-align: center;
	image{
		width: 80rpx;
		height: 80rpx;
	}
	.txt{
		margin-top: 6rpx;
		font-size: 24rpx;
		background-color: rgba(151, 151, 151, 0.5);
		text-align: center;
		padding: 4rpx 20rpx 6rpx 20rpx;
		border-radius: 50rpx;
		transform:scale(0.85);
	}
}
.share-icon{
	position: absolute;
	bottom: 60vh;
	right:32rpx;
	z-index: 101;
	text-align: center;
	image{
		width: 80rpx;
		height: 80rpx;
	}
	.txt{
		margin-top: 6rpx;
		font-size: 24rpx;
		background-color: rgba(151, 151, 151, 0.5);
		text-align: center;
		padding: 4rpx 20rpx 6rpx 20rpx;
		border-radius: 50rpx;
		transform:scale(0.85);
	}
}
.task-icon{
	position: absolute;
	bottom: 60vh;
	right:32rpx;
	z-index: 101;
	image{
		width: 80rpx;
		height: 80rpx;
	}
}

.goods-box{
	color: #333;
	.titles{
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #e1e1e1;
	}
	.goods-list-scroll{
		height: 800rpx;
		.item{
			display: flex;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			border-bottom: 1px solid #F1F1F1;
			&:last-child{
				border-bottom:none;
			}
			.image{
				width: 120rpx;
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.info{
				width: 566rpx;
				margin-left: 20rpx;
				position: relative;
				.title{
					font-size: 32rpx;
					height: 82rpx;
				}
				.price{
					font-size: 32rpx;
					text{
						color: #d03737;
					}
					.ot-price{
						margin-left: 10rpx;
						color: #999999;
						font-size: 26rpx;
						text-decoration: line-through;
					}
				}
				.buy{
					position: absolute;
					right: 0;
					bottom: 10rpx;
					text{
						background-color: #d03737;
						color: #FFFFFF;
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
}

/deep/.u-mode-center-box{
	background: none !important;
}
.coupon-box{
	position: relative;
	image{
		width: 100%;
	}
	.coupon-con{
		position: absolute;
		z-index: 13;
		top: 100rpx;
		left: 0rpx;
		width: 100%;
		text-align: center;
		.price{
			color: #d63a3a;
			font-size: 100rpx;
			font-weight: bold;
		}
		.name{
			margin-top: 60rpx;
			color: #e2e2e2;
		}
		.time{
			margin-top: 140rpx;
			color: #fbb976;
			font-size: 24rpx;
		}
	}
	.coupon-cons{
		position: absolute;
		top: 40rpx;
		left: 0rpx;
		width: 100%;
		text-align: center;
		.title{
			color: #fb257e;
			font-weight: bold;
		}
		.sub-title{
			color: #fb257e;
			font-weight: bold;
		}
		.coupon-list{
			margin: 20rpx 60rpx 20rpx 50rpx;
			position: relative;
			.coupon-list-scroll{
				height: 230rpx;
				.items{
					color: #FFFFFF;
					position: relative;
					margin-bottom: 10rpx;
					.price{
						position: absolute;
						top: 20rpx;
						left: 70rpx;
						font-size: 60rpx;
						font-weight: bold;
					}
					.name{
						position: absolute;
						top: 48rpx;
						left: 224rpx;
						font-size: 24rpx;
						color: #ececec;
					}
				}
			}

		}
		.task-box{
			position: relative;
			color: #000;
			.price{
				color: #fb257e;
				font-weight: bold;
				font-size: 120rpx;
				margin-top: 50rpx;
				text{
					font-size: 30rpx;
				}
			}
			.name{
				color: #666666;
			}
			.goods-name{
				margin-top: 40rpx;
				color: #fb257e;
				font-size: 38rpx;
				font-weight: bold;
			}
			.select{
				margin-top: 50rpx;
				border: 1px solid #fb257e;
				color: #fb257e;
				display: inline-block;
				padding: 10rpx 30rpx;
				border-radius: 10rpx;
			}
			.address{
				font-size: 12px;
				color: #666;
				margin-top: 20px;
				padding: 0 30px;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
	}
	.close{
		text-align: center;
		margin-top: 20rpx;
	}
	.submit{
		// background: rgb(255, 0, 0);
		position: absolute;
		bottom: 180rpx;
		left: 50%;
		width: 145px;
		margin-left: -75px;
		height: 70rpx;
		z-index: 99;
	}
}
.goods{
	display: flex;
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	position: absolute;
	bottom: 150rpx;
	left: 30rpx;
	z-index: 12;
	width: 500rpx;
	.image{
		width: 120rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
	}
	.info{
		width: 350rpx;
		margin-left: 20rpx;
		position: relative;
		.title{
			font-size: 28rpx;
			height: 82rpx;
			color: #333;
		}
		.price{
			font-size: 32rpx;
			text{
				color: #d03737;
			}
			.ot-price{
				margin-left: 10rpx;
				color: #999999;
				font-size: 26rpx;
				text-decoration: line-through;
			}
		}
		.buy{
			position: absolute;
			right: 0;
			bottom: 5rpx;
			text{
				background-color: #d03737;
				color: #FFFFFF;
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}
		}
	}
	.close{
		position: absolute;
		right: -60rpx;
		top: 60rpx;
	}
}
.task-list-box{
	position: relative;
	.task-bg{
		width: 100%;
		image{
			width: 100%;
		}
	}
	.titles{
		position: absolute;
		z-index: 150;
		top: 100rpx;
		right: 100rpx;
		color: #FFF;
		font-size: 38rpx;
		font-weight: bold;
	}
	.list{
		margin: 20rpx 0;
		font-size: 24rpx;
		position: absolute;
		top: 220rpx;
		left: 60rpx;
		color: #666666;
		.item{
			display: flex;
			margin-bottom: 20rpx;
			.icon{
				margin-right: 16rpx;
				width: 70rpx;
				image{
					width: 70rpx;
					height: 70rpx;
				}
			}
			.center-box{
				width: 330rpx;
				.top{
					display: flex;
					.name{
						color: #000;
						margin-right: 10rpx;
					}
					.progress{
						width: 40%;
						// margin-right: 10rpx;
					}
					.num{
						transform:scale(0.8);
						text{
							color: #d03737;
						}
					}
				}
				.desc{
					color: #999999;
					transform:scale(0.8);
					white-space: nowrap;
					margin-left: -36rpx;
					margin-top: 8rpx;
				}
			}
			.right-box{
				width: 120rpx;
				text-align: center;
				transform:scale(0.9);
				padding-top: 10rpx;
				text{
					background: linear-gradient(to right, #e50b7c, #ea525e);
					color: #FFFFFF;
					padding: 10rpx 20rpx;
					border-radius: 50rpx;
				}
			}
		}
	}
	.close{
		text-align: center;
		margin-top: 10rpx;
		.icon{
			background-color: rgba(151, 151, 151, 0.5);
			display: inline-block;
			padding: 10rpx;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}
	}
	// .task-status{
	// 	background-color: #999;
	// 	color: #fff;
	// 	display: inline-block;
	// 	font-size: 24rpx;
	// 	padding: 10rpx 20rpx;
	// 	border-radius: 8rpx;
	// }
}
.tips{
	// background-color: #999999;
	position: absolute;
	top:0;
	width:100%;
	z-index: 99999;
	image{
		width: 100%;
	}
}
.wechat-qrcode{
	color: #333;
	background-color: #FFFFFF;
	.titles{
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #e1e1e1;
	}
	.img{
		padding: 30rpx;
		image{
			width: 500rpx;
			height: 500rpx;
			border-radius: 16rpx;
		}
	}
	
}
.distribution-posters{
	width: 710rpx;
	.qrcode-tips{
		text-align: center;
		margin-top: -50rpx;
	}
}
.distribution-posters swiper {
	width: 100%;
	height: 1050rpx;
	position: relative;
	margin-top: 40rpx;
}

.distribution-posters .slide-image {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	border-radius: 15rpx;
}

.distribution-posters /deep/.active {
	transform: none;
	transition: all 0.2s ease-in 0s;
}

.distribution-posters /deep/ .quiet {
	transform: scale(0.8333333);
	transition: all 0.2s ease-in 0s;
}

.distribution-posters .keep {
	font-size: 30rpx;
	color: #fff;
	width: 600rpx;
	height: 80rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 80rpx;
	margin: 38rpx auto;
}

.distribution-posters .preserve {
	color: #fff;
	text-align: center;
	margin-top: 38rpx;
}

.distribution-posters .preserve .line {
	width: 100rpx;
	height: 1px;
	background-color: #fff;
}

.distribution-posters .preserve .tip {
	margin: 0 30rpx;
}
.canvas {
	width: 100%;
	height: 550px;
}
</style>